import { useState } from "react";
// import { useContext } from "../../8_hooks/2_sources/5_useContext";
import { useContext } from "react";
import { settingContext } from "./index";
// import PubSub from 'pubsub-js';
import PubSub from '../sources/pubsub-js';

export default function ProfileSetting() {
    const [username, setUsername] = useState("");
    const [loading, setLoading] = useState(false);
    // 获取兄弟组件的值，这下就非常不容易了
    // 方法一： 此处在来一个PubSub.subscript监听Header中username的变化
    // const contextUsername = "??"
    // 方法二： 再次初始化算了，
    const contextUsername = useContext(settingContext).username;

    return (
        <div className='profile-setting'>
            个人信息设置页面：<br />
            原来的名称：<span style={{ marginRight: '10px' }}>{contextUsername}</span>
            <br />
            新名字： <input placeholder="新用户名"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button onClick={e => {
                PubSub.publish('changeUsername', username);
                console.log(settingContext, settingContext);
                setUsername('');
            }}>修改</button>

            <br />
            由后端耗时2s获取未读消息条数：
            <button onClick={() => {
                setLoading(true);
                setTimeout(() => {
                    const unReadCount = Math.floor(Math.random() * 20);
                    PubSub.publish('unReadCount', unReadCount);
                    setLoading(false);
                }, 2000);
            }}

            >{loading ? 'loading...' : '延时获取'}</button>

        </div>
    )
}